<!-- #layout name=blank --sideType='market'-->
<style>
  .content-container .item {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin-bottom: 15px;
    padding: 15px 0;
    cursor: pointer;
    position: relative;
    transition: all 200ms;
    top: 0;
  }

  .content-container .item:hover {
    top: -4px;
  }

  .content-container .item p {
    text-overflow: ellipsis;
    max-height: 36px;
    overflow: hidden;
  }

  .media .icon {
    width: 64px;
    height: 64px;
    text-align: center;
    line-height: 64px;
    background: #eeeeee;
    display: block;
    border-radius: 2px;
    position: relative;
  }

  .media .icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #aaaaaa;
  }
</style>

<div id="app">
  <div class="page-header">
    <h1 class="title">Hardwares</h1>
  </div>

  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="content-container row clearfix">
    <div class="col-md-4" v-for="($data,index) in hardwares">
      <div class="item clearfix" @click="onSelectHardware($data)">
        <div class="col-md-12">
          <div class="media">
            <a class="pull-left" href="javascript:;">
              <span class="icon">
                <i class="fa fa-2x" :class="$data.icon"></i>
              </span>
            </a>
            <div class="media-body">
              <h4 class="media-heading">{{$data.name}}</h4>
              <p
                >{{$data.description ||
                Kooboo.text.site.template.noDescription}}</p
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <hardware-modal
    :is-show.sync="showHardwareModal"
    :data="hardwareData"
  ></hardware-modal>
  <cashier-modal></cashier-modal>
</div>

<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/View/Market/Scripts/Kooboo.Market.js",
    "/_Admin/View/Market/Scripts/components/HardwareModal.js",
    "/_Admin/View/Market/Scripts/components/CashierModal.js"
  ]);

  (function() {
    var self = new Vue({
      el: "#app",
      data: function() {
        return {
          breads: [
            {
              name: "MARKET"
            },
            {
              name: Kooboo.text.common.Hardwares
            }
          ],
          hardwares: [],
          showHardwareModal: false,
          hardwareData: null
        };
      },
      mounted: function() {
        var self = this;
        Kooboo.Infrastructure.getSalesItems().then(function(res) {
          if (res.success) {
            self.hardwares = res.model;
          }
        });
      },
      methods: {
        onSelectHardware: function(m) {
          self.hardwareData = JSON.parse(JSON.stringify(m));
          self.showHardwareModal = true;
        }
      }
    });
  })();
</script>
